<template>
  <div class="main conin_pricebox">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <!--内容部分  -->
    <div class="conin_pricemain ">
      <div class="coin_toptab">
        <el-row :gutter="20" style="margin:0">
          <el-col :span="10">
            <div class="grid-content ">
            <ul class="flex top_ul">
              <li class="font-16 active">币币</li>
              <li class="font-16 ">合约</li>
            </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20" style="margin-right:0">
        <el-col :span="19">
          <div class="grid-content bg-purple">
            <div class="coin_mainleft proback_fff">
              <div class="nav_first">
                <!-- 自选 -->
                <ul>
                  <li @click="getCustomList()" :class="currentCoinId=='opt'?'active':''"><i class="el-icon-star-on">自选</i></li>
                  <li v-for="(item,index) in topMenu" :key="index" :class="currentCoinId==index?'active':''" @click="clickTab(item)">
                    {{item.mname}}
                  </li>
                </ul>
              </div>
              <div class="nav_second">
                <!-- 全部 主板  创新版选择 -->
                <ul>
                  <li v-for="(item,i) in mainCoinList" :key="i" :class="cointabID==item.id?'active':''" @click="coinTable(item)">
                    <h3>{{item.coinname}}</h3>
                  </li>
                </ul>
              </div>
              <div class="mark_table">
                <el-table
                  :data="allCoinList"
                  style="width: 100%"
                  :default-sort = "{prop: 'date', order: 'descending'}" height="900"
                  @row-click='onTableRowClick'
                  >
                  <el-table-column
                    prop="tradcoin"
                    label="币种名称"
                    sortable
                    width="210">
                    <template slot-scope="scope">
                      <div class="flex">
                        <div
                            @click="addMylist(scope.row,scope.$index)"
                            :title="$t('label109')"
                            class="option wh-full"
                          >
                            <i
                              class="icon-star font-16 "
                              :class="scope.row.isMyLike?'el-icon-star-on star_active':'el-icon-star-off star_deft'"
                            >
                            </i>
                        </div>
                        <P class="font-w600">{{scope.row.tradcoin}}&nbsp;/&nbsp;</P>
                        <span>{{scope.row.chinaname}}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="最新价"
                    sortable
                    width="180">
                    <template slot-scope="scope">
                        <P>{{scope.row.price*1}}</P>
                        <span>≈ ¥ {{scope.row.cny*1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="涨幅"
                    sortable
                  >
                    <template slot-scope="scope">
                      <span :class="scope.row.rise >= '0' ? 'color-pgreen' : 'color-pred '" 
                      v-if="scope.row.rise>=0">+{{scope.row.rise}}%</span>
                      <span :class="scope.row.rise < '0' ? 'color-pred' : 'color-pgreen '" 
                      v-if="scope.row.rise<0">{{scope.row.rise}}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="height"
                    label="最高价"
                  >
                    <template slot-scope="scope">
                        <P>{{scope.row.height*1}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="low"
                    label="最低价"
                    >
                    <template slot-scope="scope">
                        <P>{{scope.row.low*1}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="24H量"
                  >
                    <template slot-scope="scope">
                        <P>{{scope.row.volume}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="number"
                    label="24H成交额"
                    >
                    <template slot-scope="scope">
                        <P>￥{{(scope.row.volume*scope.row.cny*1).toFixed(2)}}</P>
                    </template>
                  </el-table-column>
                  
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple proback_fff">
            <div slot="header" class="rightnav_first">
                <span class="font-16 font-bold nav_title">概况</span>
                <i class="el-icon-star-on"></i>
            </div>
          <div class="coinmain_right ">
              <div  class="right_itrm coin_one flex">
                <div class="coin_oneleft">
                  <h2 class="font-20 coin_name">{{rightTopInfo.tradcoin}} / {{rightTopInfo.maincoin}}</h2>
                  <span class="blckname font-12"
                    v-text="rightTopInfo.plate=='main'?'主板':'创新版'"></span> 
                </div>
                <div>
                    <el-button type="primary" size="small" @click="toTrad()">去交易</el-button>
                </div>
              </div>
              <div class="line-box m-top-15">
                <!-- <div class="line-left line-img">
                  <img src="../../assets/images/trade/priline1.png" alt="" srcset="">
                </div> -->
                <p v-text="rightTopInfo.chinaname"></p>
                <div class="line-right">
                  <h3>{{rightTopInfo.price}}</h3>
                  <p>≈ ¥{{rightTopInfo.cny}}</p>
                </div>
                <div class="price_cor">
                  <p class="m-bot-5">24H量: {{rightTopInfo.volume}}</p>
                  <p :class="rightTopInfo.rise >= '0' ? 'color-pgreen' : 'color-pred '" 
                      v-if="rightTopInfo.rise>=0">+{{rightTopInfo.rise}}%</p>
                  <p :class="rightTopInfo.rise < '0' ? 'color-pred' : 'color-pgreen '" 
                      v-if="rightTopInfo.rise<0">{{rightTopInfo.rise}}%</p>
                </div>
              </div>
              <div class="coininfo">
                <template>
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                      <div class="infolist">
                        <div class="flex-between">
                          <p>币种名称</p><p>{{rightData.symbol}}</p>
                        </div>
                        <div class="flex-between">
                          <p>发行时间</p><p>----</p>
                        </div>
                        <div class="flex-between">
                          <p>发行总量</p><p>{{rightData.number}}</p>
                        </div>
                        <div class="flex-between">
                          <p>相关链接</p><p>{{rightData.web}}</p>
                        </div>
                      </div>
                      <div class="disp">
                          <p>简介</p>
                          <p>{{rightData.info}}</p>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </template>
              </div>
              
              
          </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import axios from "axios";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  data() {
    return {
      coinSerch:"",
      topMenu:[ 
        {mname:'全部行情',enname:'main',index:'0'}, {mname:'主板',enname:'main',index:'1'},{mname:'创新版',enname:'pioneer',index:'2'},
      ],
      mainCoinList:[
        {coinname:'USDT',id:'0',},{coinname:'ETH',id:'1',},{coinname:'BTC',id:'2',}
      ],
      tableData:[],

      tabsite:{},
      activeName:'first',
      canSubmit: true,
      ins:0,
      coinins:0,
      rightData:{
        price:9815.12,rise:'10',
      },
      topblockName:'',
      
      rightTop:{
        tradcoin:'',
        maincoin:'',
        topblockName:'',
        area:'1',
      },
      seeDta:{},
      maincoin:'USDT',//usdt
      tradcoin:'',//xrp
      areaID:'main',
      cointabID:'0',
      rightTopInfo:{},
      currentCoinId:'0',
      resArr:[],

      // 新加
      areaSelected:sessionStorage.getItem('areaSelected')||0,
      areaArr:['全部','主板','创业板','自选'],

      mainCoinSelected:sessionStorage.getItem('mainCoinSelected')||0,
      mainCoinArr:[],

      allCoinList:[],

      websocket:null
      // 新加end
    };
  },
  watch: {
    areaSelected(val){
      sessionStorage.setItem('areaSelected',val)
    },
    mainCoinSelected(val){
      sessionStorage.setItem('mainCoinSelected',val)
    }
  },
  destroyed(){
    this.websocket.close();
  },
  created() {
    this.$store.commit("updateNeedShowFooter", true);
    this.$store.commit("updateSelected", 1);
  },
  mounted() {
    this.getSymbolsTwo();
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    formatter(row, column) {
        return row.address;
    },
    //全部行情
    getarea(){
      this.request(this.api.getarea).then(res => {
        console.log(`交易板块:${JSON.stringify(res)}`);
        this.topList=res.data;
        this.area=res.data[0].areaid;
        this.topblockName=res.data[0].name;
        if(this.area!=''){
          let area =res.data[0].areaid;
          // this.getmaincoin(area);
        }
      });
    },
    getmaincoin(area){
      this.mainCoinList=[]
      this.request(this.api.getmaincoin,{area:area}).then(res => {
        console.log(`交易对:${JSON.stringify(res)}`);
        if(res.code==0 && res.data.length>0){
          this.mainCoinList=res.data;
          this.maincoin=res.data[0].maincoin;
          this.seeDta={
            area:this.area,
            maincoin:this.maincoin,
            coin:this.tradcoin
          }
          console.log(this.seeDta);
          this.gettradcoin(this.seeDta.area,this.seeDta.maincoin)
          return this.seeDta
        }else{
          this.mainCoinList=[]
          this.rightTop={}
        }
        
      });
    },
    // 币种列表
    getsymbols(areaID,maincoin){
      this.tableData=[];
      var areaID=areaID;
      var maincoin =maincoin;
      this.request(this.api.symbols).then(res => {
        console.log(`交易币种:${JSON.stringify(res)}`);
        if(res.code==0&&res.data.length>0){
          this.initWebSocket();
          this.processData(res.data);

          this.tradcoin=this.tableData[0].tradcoin;
          this.rightTopInfo=this.tableData[0];
          // 查询列表第一条右侧数据
          this.seeDta={
            area:this.area,
            maincoin:this.maincoin,
            coin:this.tradcoin
          }
          console.log(this.seeDta);
          this.seeCoinRightInfo()
          return this.seeDta
        }else{
          this.tableData=[];
          this.rightTop=[];
        }
      });
    },
    // 主板 创业板切换
    selectTop(item,index){
      console.log(index);
      this.ins=index;
      this.coinins=0;
      this.area=item.areaid;
      this.topblockName=item.name;
      this.getmaincoin(this.area)
      this.gettradcoin(this.area,this.maincoin);

      this.seeCoinRightInfo()
    },
    //交易对 币种 点击
    selectMcoin(item,index){
      // this.getmaincoin(this.area)
      this.coinins=index;
      this.maincoin=item.maincoin;
      console.log(this.maincoin);
      this.gettradcoin(this.area,this.maincoin);
      this.seeCoinRightInfo()
    },
    //表格列点击
    onTableRowClick(rowData) {
      console.log(rowData);
      this.rightData=rowData;
      this.tradcoin=this.rightData.tradcoin;
      this.rightTopInfo=rowData;
      sessionStorage.setItem('quotationDetails',JSON.stringify(rowData));
      let seeDta={
        area:this.area,
        maincoin:this.maincoin,
        coin:this.tradcoin
      }
      this.seeCoinRightInfo(seeDta);
    },
    seeCoinRightInfo(seeDta){
      console.log(seeDta);
      // 查看右侧的币种详情 gettradcoin
      this.request(this.api.currency_introduction,{area:this.area,maincoin:this.maincoin,coin:this.tradcoin}).then(res => {
        console.log(`交易币种:${JSON.stringify(res)}`);
        if(res.code==0){
          this.rightData=res.data[0];
        }else{
          this.tableData=[];
          this.rightData=[];
        }
      });
    },
    toTrad(){
      const link ='currency_trade?maincoinid='+this.maincoin+'&coinid='+this.tradcoin+'&areaid='+this.areaID;
      this.navigateTo(link);
    },
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentCoinId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    },
    // 获取我的自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentCoinId = "opt";
      if (customList) {
        this.tableData = customList;
      } else {
        this.tableData = [];
      }
    },
    clickTab(item){
      this.currentCoinId=item.index;
      var areaID='';
      if(this.currentCoinId==1||this.currentCoinId==0){
        areaID='main';
      }else if (this.currentCoinId==2){
        areaID='pioneer';
      }
      return this.getsymbols(areaID,this.maincoin);
    },
    coinTable(item){
      this.cointabID=item.id;
      this.maincoin=item.coinname;
      return this.getsymbols(this.areaID,this.maincoin);
    },

    // 新加
    getSymbolsTwo(){
      this.request(this.api.symbols).then(res => {
        if(res.code==0){
          this.initWebSocket();
          this.processData(res.data);
        }
      })
    },
    //加工行情数据
    processData(coinData){
      let mainCoinLength = this.mainCoinArr.length;
      let optionalData = JSON.parse(localStorage.getItem('optionalData'))||[];
      coinData.forEach(data=>{
        optionalData.forEach(item=>{
          if(data.tradcoin==item.tradcoin&&data.maincoin==item.maincoin){
            data.isOptional = true;
          }
        })
        if(mainCoinLength==0){
          if(!this.mainCoinArr.includes(data.maincoin)){
            this.mainCoinArr.push(data.maincoin)
          }
        }
      })
      this.allCoinList = coinData;
    },
    goDetails(data){
      sessionStorage.setItem('quotationDetails',JSON.stringify(data));
      this.pushPath('/quotationDetails')
    },

    initWebSocket(){ //初始化 
      let userNo = new Date().getTime() + Math.floor(Math.random()*1000 + 1);
      this.websocket = new WebSocket(`${this.api.socketUrl}/ws/symbols/${userNo}`);
      this.websocket.onopen = () =>{
        console.log("WebSocket连接成功");
      };
      this.websocket.onmessage = (res)=>{ //数据接收  
        //处理逻辑
        let data = JSON.parse(res.data)
        
        this.processData(data.symbols);
      }
      this.websocket.onerror = (e) =>{ //错误
        console.log(e);
        console.log("WebSocket连接发生错误");
      };
    },
    // 新加end
  }
};
</script>

<style lang="scss" scoped>
.conin_pricemain{
  .coin_toptab{
    height: 50px;
    padding-bottom: 0px;
    background-color: #1b2945;
    border-top: 1px solid #17232f;
    .grid-content {
      height: 40px;
      .top_ul{
        display: flex;
        color: #9ca9b5;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        li{transition: all .2s ease-in-out;width: 145px;cursor: pointer;}
        .active{color: #ffffff;}
      }
    }
  }
  // 币种
  .nav_first{
    background-color: #f2f6fa;
    ul{
      display: flex;cursor: pointer;
      li{height: 40px;padding: 0 24px;line-height: 36px;text-align: center;border-top: 2px solid transparent;}
      .active{
        color: #1c242c!important;
        border-color: #357ce1;
        background-color: #fff;
      }
    }
  }
  .nav_second {
    z-index: 1;
    height: 60px;
    position: relative;
    padding-left: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #e6ecf2;
    ul{
      li{color: #596a7a;
        width: 70px;
        height: 28px;
        margin: 16px 16px 16px 0;
        cursor: pointer;
        line-height: 28px;
        border-radius: 2px;
        text-align: center;
        display: inline-block;
        text-transform: uppercase;
        &:hover{background: #f2f6fa;}
      }
      
    }
  }
  .nav_second li.active, .nav_second li.active:hover{background-color: #357ce1;color: #fff;}
}
.flex{display: flex; align-items:center;}
// 右侧
.rightnav_first {
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
    background-color: #f2f6fa;
    overflow: hidden;
    display: flex;justify-content: space-between;align-items:center;
    .nav_title {
        color: #1c242c;
        float: left;
        z-index: 14;
        font-weight: 600;
        padding-left: 24px;
    }
    i{font-size: 24px;padding-right: 20px;}
  }
.coinmain_right{
  padding: 0 15px;
  .coin_one{align-items:center;justify-content:space-between;margin-top: 30px;}
  .blckname{display:inline-block;padding: 5px;
    border: 1px solid #4869f6;margin-top: 10px;border-radius: 4px;color:#4869f6;
  }
  .line-box{
    display: flex;justify-content:space-between;
    .line-img{
      img{width: 100%;}
    }
    .line-right{
      h3{color: #ef5656;font-size: 20px;line-height: 24px;}
      p{color: #333333;line-height: 20px;}
    }
    .m-bot-5{margin-bottom: 5px;}
  }
  .infolist{
    p{line-height: 30px;}
    p:nth-child(1){color: #9ca9b5;}
    p:nth-child(2){color: #596a7a;}
  }
  .disp{
    p{line-height: 20px;}
    p:nth-child(1){color: #9ca9b5;}
    p:nth-child(2){color: #596a7a;}
  }
}
.conin_pricemain {background: #e5ebf5;min-width: $min-boxwh;}
.proback_fff{background: #ffffff;min-height: 950px;}
.option{
  width: 30px;
  i{cursor: pointer;font-size: 16px;}
  .star_deft{color:#96b4c6;}
  .star_active{color:#357ce1;font-size: 18px;}
  .active{color: #1c242c !important;border-color: #357ce1;background-color: #fff;}
}
</style>